// components/BlogCard.tsx
import Link from "next/link";
import CategoryTag from "./CategoryTag";
import { BlogArticle, Category } from "@/lib/api";

interface BlogCardProps {
  article: BlogArticle;
  categories: Category[];
}

export default function BlogCard({ article, categories }: BlogCardProps) {
  const category = categories.find((cat) => cat.id === article.categoryId);

  return (
    <div className="border rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
      <div className="p-4">
        <h2 className="text-xl font-semibold mb-2">
          <Link href={`/blog/${article.id}`} className="hover:underline">
            {article.title}
          </Link>
        </h2>
        <p className="text-gray-600 line-clamp-3">
          {article.content.substring(0, 100)}...
        </p>
        <div className="mt-4">
          {category && <CategoryTag name={category.name} />}
        </div>
      </div>
    </div>
  );
}
